<template>
    <el-dialog
      title="跟踪任务"
      :visible.sync="dialogVisible"
      :modal="true"
      :appendToBody="true"
      width="30%"
      v-dialog-drag
      :close-on-click-modal="false"
      top="5vh"
      @close="handleClose()"
      @open="handleOpen()"
    >
      <el-form :mode='form' ref="ruleForm" label-width="80px">
        <el-form-item label="跟踪任务">
          <el-select
            v-model="form.refineOrderId"
            placeholder="请选择跟踪任务"
            clearable
            size="small"
          >
            <el-option
              v-for="item in followList"
              :key="item.id"
              :label="item.taskName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSelect">确 定</el-button>
      </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: [Object,Array],
      default: ()=>{}
    },
  },
  data() {
    return {
      form: {
        refineOrderId:null,
      },
      followList:[],
    };
  },

  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
  },

  methods: {
    handleClose() {
      this.followList = [];
       this.form.refineOrderId = null;
    },

    handleOpen() {
      this.followList = this.row?.length ? [...this.row] : [];
      this.form.refineOrderId = this.followList[0].id
    },
    submitSelect(){
      this.$emit('selectFollow',this.form.refineOrderId)
    }
  }

};
</script>
<style lang="scss" scoped>
  .el-select{
    width: 100%;
  }
</style>
